<template>
  <div class="full-width">
    <TopPart :isLogin="false" />
    <!-- 动态渲染 -->
    <div v-for="(item, index) in theme" :key="index">
      <div v-if="item.type == 'separator'">
        <van-divider
          :style="{ color: item.color, borderColor: item.borderColor, paddingLeft: item.paddingLeft+'px', paddingRight: item.paddingRight+'px'}"
        >
          <van-icon class="icon-style" :name="item.icon" :color="item.color" />
          {{item.name}}
        </van-divider>
      </div>
      <div v-if="item.type == 'intro'">
        <div class="description">
          <p v-for="(i, idx) in item.contents" :key="idx" style="font-size:14px;">{{i}}</p>
          <van-button plain hairline type="info" @click="showVideo">查看视频</van-button>
        </div>
      </div>
      <div v-if="item.type == 'video'">
        <van-dialog v-model="show" :showConfirmButton="false" :showCancelButton="true" cancelButtonText="关闭">
          <div class="video-wrapper">
            <iframe frameborder="0" :style="item.videoStyle" :src="item.link" allowFullScreen="true"></iframe>
          </div>
        </van-dialog>
      </div>
      <div v-if="item.type == 'banner'">
        <van-swipe 
          class="my-swipe" 
          @change="onChange"
          :autoplay="4000" 
          >
          <van-swipe-item 
            v-for="(image, index) in item.data" 
            :key="index">
            <img width="100%" height="250px" :src="image.url" />
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">{{ current + 1 }}/3</div>
          </template>
        </van-swipe>
      </div>
      <div v-if="item.type == 'news'">
        <van-notice-bar
          left-icon="info-o"
          color="#1989fa" 
          background="#f4f4f4"
          mode="link"
          :scrollable="false"
        >
          <van-swipe
            vertical
            class="notice-swipe"
            :autoplay="5000"
            :show-indicators="false"
          >
            <van-swipe-item v-for="(i, idx) in item.contents" :key="idx"><a style="text-decoration:none;color:#1989fa;" :href="i.link" target="_blank">{{i.title}}</a></van-swipe-item>
          </van-swipe>
        </van-notice-bar>
      </div>
      <div v-if="item.type == 'course'">
        <van-collapse v-model="activeNames">
          <van-collapse-item v-for="(i, idx) in item.contents" :key="idx" :title="i.title" :name="i.name" :icon="i.icon" :color="i.color" value="更多">
            <div v-for="(t, tdx) in i.text" :key="tdx">
              <b style='font-size:14px'>{{t.subtitle}}</b><br>
              {{t.content}}<br><br>
            </div>
          </van-collapse-item>
        </van-collapse>
      </div>
    </div>
    <van-divider
      :style="{color:'#1989fa',borderColor:'#1989fa',padding:'0 16px'}"
    >
      <van-icon class="icon-style" name="scan" color="#1989fa" />
      扫码关注
    </van-divider>
    <div style="text-align:center;">
      <van-button 
        plain 
        hairline 
        style="margin-bottom:80px;" 
        type="info" 
        @click="showQR">
        打开二维码
      </van-button>
    </div>
    <van-popup
      style="text-align:center;"
      round 
      closeable
      close-icon="close"
      v-model="showCode" 
      position="bottom" 
      :style="{height:'30%'}">
      <img :src="qrUrl" width="220px" height="100%" />
    </van-popup>
    <div class="my-tip" v-show="showTip">
      <i @click="goTop()" class="fa fa-chevron-up"></i>
    </div>
  </div>
</template>

<script>
import TopPart from 'components/Home/TopPart'
import { mapMutations } from 'vuex'
import { getActiveSettingB } from '@/api/admin'

export default {
  data() {
    return {
      // 当前banner
      current: 0,
      // 当前collapse
      activeNames: [],
      // qr code地址
      qrUrl: require('static/img/wechatcode.jpg'),
      // 显示视频
      show: false,
      // 显示qr code
      showCode: false,
      // 显示回到顶部
      showTip: false,
      // 主题数据
      theme: []
      // 假数据
      // images: [
      //   require('static/img/ad1.png'),
      //   require('static/img/ad2.png'),
      //   require('static/img/ad3.png')
      // ],
      // videoUrl: require('static/video/intro1.mp4')
    }
  },
  created() {
    this.getData()
  },
  mounted() {
    window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed() {
    window.removeEventListener('scroll', this.scrollToTop)
  },
  methods: {
    ...mapMutations(['adminLogout']),
    // 获取主页数据
    getData() {
      getActiveSettingB().then(res => {
        if(res.data.code === '0') {
          res.data.setting.content = JSON.parse(res.data.setting.content)
          this.theme = res.data.setting.content
        } else {
          this.$message.error(res.data.desc)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // swiper变化
    onChange(index) {
      this.current = index
    },
    // 显示视频
    showVideo() {
      this.show = true;
    },
    // 显示qr code
    showQR() {
      this.showCode = true;
    },
    // 显示回到顶部
    scrollToTop() { 
    　let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 150) {
        this.showTip = true
      } else {
        this.showTip = false
      }
    },
    // 回到顶部
    goTop() {
      let top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50
        if (top <= 0) {
          clearInterval(timeTop)
        }
      }, 16)
    }
  },
  components: {
    TopPart
  }
}
</script>

<style lang="stylus" scoped>
.icon-style
 font-size 20px
 margin-right: 4px
.my-swipe
  margin-top 46px
.custom-indicator
  position absolute
  right 5px
  bottom 5px
  padding 2px 5px
  font-size 12px
  background rgba(0, 0, 0, 0.1)
.description
  text-align center
.notice-swipe 
  height 40px
  line-height 40px
.my-tip
  position fixed
  bottom 70px
  right 20px
  border 1px solid #ddd
  padding 12px 15px 15px 15px
  border-radius 50%
  background-color #1989fa
  color #fff
  box-shadow 0 1px 5px 0 #e0e0e0
.video-wrapper
  padding 10px
  
</style>
